<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Devices</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='control_style.css') }}"/>
</head>
<body>
<div id="" class="left full-height">
    <!-- logo -->
    <div id="" class="logo-bar">
        <div id="" class="ele full-height">
            <h1 style="color: #ededed;">LOGO</h1>
        </div>
    </div>

    <!-- tabs -->
    <div id="" class="tab-bar">
        <div style="height: 50px;width: 100%"></div>
        <a href="/devices">
            <div id="" class="tab-content no-choix">
                DEVICES
            </div>
        </a>
        <a href="/types">
            <div id="" class="tab-content no-choix">
                TYPE
            </div>
        </a>
        <a href="/conn">
            <div id="" class="tab-content choix">
                CONNECTIONS
            </div>
        </a>
        <a href="/log">
            <div id="" class="tab-content no-choix">
                LOG
            </div>
        </a>
        <a href="/groups">
            <div id="" class="tab-content no-choix">
                GROUPS
            </div>
        </a>
    </div>
</div>

<div id="" class="right full-height">
    <!-- admin -->
    <div id="" class="admin-bar">

    </div>
    <!-- main content -->
    <div id="" class="content-background">
        <div class="content-box">
            <div class="data-box" style="padding-left: 30px">
                <div id="conn_function"></div>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    function jump(url) {
        window.location.href = url;
    }

    function create_xhr() {
        let XHR = [  //兼容不同浏览器和版本得创建函数数组
            function () {
                return new XMLHttpRequest()
            },
            function () {
                return new ActiveXObject("Msxml2.XMLHTTP")
            },
            function () {
                return new ActiveXObject("Msxml3.XMLHTTP")
            },
            function () {
                return new ActiveXObject("Microsoft.XMLHTTP")
            }
        ];
        let xhr = null;
        //尝试调用函数，如果成功则返回XMLHttpRequest对象，否则继续尝试
        for (let i = 0; i < XHR.length; i++) {
            try {
                xhr = XHR[i]();
            } catch (e) {
                continue  //如果发生异常，则继续下一个函数调用
            }
            break;  //如果成功，则中止循环
        }
        return xhr;  //返回对象实例
    }

    connection_function = document.getElementById('conn_function')
    {% if connection[2]=="DEVICE" %}
        modify_connection({{ connection[0] }}, '{{ connection[1] }}', '{{ connection[2] }}', {{ connection[3] }})
    {% else %}
        modify_connection({{ connection[0] }}, '{{ connection[1] }}', '{{ connection[2] }}', {{ connection[4] }})
    {% endif %}

    function modify_connection(c_id, d_id, rt, rt_id) {
        connection_function.innerHTML = "<h2>Modify Connection</h2>\n" +
            "            <p>id: <span id=\"modify-connection-id\"></span></p>\n" +
            "            <p>device:<select name=\"device\" id=\"modify-connection-device\">\n" +
            "                {% for device in devices %}\n"+
                "                    <option value=\"{{ device[0] }}\">{{ device[1] }}</option>\n"+
                "                {% endfor %}\n" +
            "            </select></p>\n" +
            "        <p>related <select name=\"\" id=\"modify-connection-rt\" onchange=\"connection_ctype_change()\">\n" +
            "            <option value=\"DEVICE\" selected=\"\">DEVICE</option>\n" +
            "            <option value=\"GROUP\">GROUP</option>\n" +
            "        </select></p>\n" +
            "        <p>related with <select name=\"\" id=\"modify-connection-related-id\">\n" +
            "            {% for device in devices %}\n"+
                "                <option value=\"{{ device[0] }}\">{{ device[1] }}</option>\n"+
                "            {% endfor %}\n" +
            "        </select></p>\n" +
            "        <button onclick=\"confirm_modify_connection()\">submit</button>"
        let c_id_block = document.getElementById('modify-connection-id')
        c_id_block.innerText = c_id
        let d_id_block = document.getElementById('modify-connection-device')
        makeOptionSelected(d_id_block, d_id)
        let rt_block = document.getElementById('modify-connection-rt')
        makeOptionSelected(rt_block, rt)
        connection_ctype_change()
        let rt_id_block = document.getElementById('modify-connection-related-id')
        makeOptionSelected(rt_id_block, rt_id)
    }

    function connection_ctype_change() {
        let type_select = document.getElementById('modify-connection-rt')
        let type_select_num = type_select.selectedIndex
        let r = document.getElementById('modify-connection-related-id')
        r.options.length = 0
        if (type_select_num == 1) {
            {% for t in gd %}
                r.options.add(new Option("{{ gd[t] }}", "{{ t }}"))
            {% endfor %}
        } else {
            {% for d in devices %}
                r.options.add(new Option("{{ d[1] }}", "{{ d[0] }}"))
            {% endfor %}
        }
    }

    function confirm_modify_connection() {
        let c_id_block = document.getElementById('modify-connection-id')
        let d_id_block = document.getElementById('modify-connection-device')
        let rt_block = document.getElementById('modify-connection-rt')
        let rt_id_block = document.getElementById('modify-connection-related-id')
        let c_id = c_id_block.innerText
        let d_id = getSelectValue(d_id_block)
        let rt = getSelectValue(rt_block)
        let rt_id = getSelectValue(rt_id_block)
        let command = {
            "id": c_id,
            "device_id": d_id,
            "related_type": rt,
            "related_id": rt_id
        }
        {#console.log(command)#}
        let xhr = create_xhr();
        xhr.open("POST", "http://127.0.0.1:4000/equipmentType/updateEquipmentConnection", true)
        xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
            if (xhr.readyState == 4) {  //监听readyState状态
                if (xhr.status == 200 || xhr.status == 0) {  //监听HTTP状态码
                    let result = xhr.responseText //接收数据
                    console.log(result);
                    if (result == "success") {
                        {#location.reload();#}
                        jump('/conn')
                    } else {
                        alert(result);
                    }
                }
            }
        };
        xhr.send(JSON.stringify(command));
    }

    function makeOptionSelected(selectBlock, optionValue) {
        for (let i = 0; i < selectBlock.options.length; i++) {
            if (selectBlock.options[i].value == optionValue) {
                selectBlock.options[i].selected = true
            }
        }
    }

    function getSelectValue(selectBlock) {
        let s_num = selectBlock.selectedIndex
        let s_value = selectBlock.options[s_num].value
        return s_value
    }

</script>
</html>